<template>
  <div>
    <avue-empty :desc="$t('deletePrompt.noData')" v-if="roamsList.length == 0"></avue-empty>
    <div v-else class="mt-20">
      <div
        v-for="(item, index) in roamsList"
        :key="index"
        :timestamp="item.time"
        placement="top"
      >
        <div class="roams-box" v-if="index % 2 == 0">
          <div class="card right">
            <span><b class="roams-title"><a class="round-one round-three"></a>{{$t('workFlow.roams.nodeType')}}</b>{{ getNodeTypeName(item.activityType) }}</span>
             <span><b class="roams-title"><a class="round-one"></a>{{$t('workFlow.roams.nodeName')}}</b>{{ getNodeTitle(item) }}</span>
            <span><b class="roams-title"><a class="round-one round-two"></a>{{$t('workFlow.roams.approvalInfor')}}</b></span>
            <span v-if="item.multiInstance">{{$t('workFlow.roams.signApproval')}}</span>
            <span class="roams-text">{{ getNodeMessage(item) }}</span>
            <span v-if="item.manualinfos&&item.manualinfos.length>0"><b class="roams-title"><a class="round-one round-three"></a>{{$t('workFlow.roams.circulator')}}</b></span>
            <span class="roams-text" v-if="item.manualinfos&&item.manualinfos.length>0">{{ getManualinfos(item) }}</span>
          </div>
          <div class="icon">
            <div
              class="el-timeline-item__node el-timeline-item__node--normal"
            ></div>
            <div class="el-timeline-item__tail"></div>
          </div>
          <div class="time flex-start">
            {{ item.time }}
          </div>
        </div>
        <div class="roams-box" v-else>
          <div class="time flex-end">
            {{ item.time }}
          </div>
          <div class="icon">
            <div
              class="el-timeline-item__node el-timeline-item__node--normal"
            ></div>
            <div class="el-timeline-item__tail"></div>
          </div>
          <div class="card left">
            <span><b class="roams-title"><a class="round-one round-three"></a>{{$t('workFlow.roams.nodeType')}}</b>{{ getNodeTypeName(item.activityType) }}</span>
            <span><b class="roams-title"><a class="round-one"></a>{{$t('workFlow.roams.nodeName')}}</b>{{ getNodeTitle(item) }}</span>
            <span><b class="roams-title"><a class="round-one round-two"></a>{{$t('workFlow.roams.approvalInfor')}}</b></span>
            <span v-if="item.multiInstance">{{$t('workFlow.roams.signApproval')}}</span>
            <span class="roams-text">{{ getNodeMessage(item) }}</span>
            <span v-if="item.manualinfos&&item.manualinfos.length>0"><b class="roams-title"><a class="round-one round-three"></a>{{$t('workFlow.roams.circulator')}}</b></span>
            <span class="roams-text" v-if="item.manualinfos&&item.manualinfos.length>0">{{ getManualinfos(item) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    roamsList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    getNodeTypeName(type) {
      let typeName = this.$t('workFlow.roams.otherNode');
      switch (type) {
        case "startEvent":
          typeName = this.$t('workFlow.roams.startNode');
          break;
        case "userTask":
          typeName = this.$t('workFlow.roams.userNode');
          break;
        case "scriptTask":
          typeName = this.$t('workFlow.roams.scriptNode');
          break;
        case "endEvent":
          typeName = this.$t('workFlow.roams.endNode');
          break;
        case "callActivity":
          typeName =this.$t('workFlow.roams.externalNode');
          break;
        default:
          break;
      }
      return typeName;
    },
    getNodeTitle(item) {      
      return `${
        item.activityName
          ? item.activityName
          : this.getNodeTypeName(item.activityType)
      }`;
    },
    getNodeMessage(item) {
      let userName = '';
      if(item.activityType=="startEvent"||item.activityType == "againStart"){
        userName = item.startUserId
      }else{
        if(item.candidate){
            userName = item.candidate
        }
      }
      if (item.activityType == "startEvent") {
        return `【${userName}】`+ this.$t('workFlow.roams.createProcess');
      }else if(item.activityType == "againStart"){
		  return `【${userName}】`+ this.$t('workFlow.processTasks.reInitiate');
	  } else if (item.activityType == "endEvent") {
        return this.$t('workFlow.roams.approvalEnd');
      }else if(item.activityType === "callActivity"){
         userName = item.startUserId;
          return `【${userName}】`+ this.$t('workFlow.roams.createProcess');
      } else {
        if (item.endTime == null) {
          return `【${userName}】`+this.$t('workFlow.roams.approving');
        } else {
          //是否为会签
          if (item.multiInstance) {
            if (item.nextNodeInfo && item.nextNodeInfo.length > 0) {
              return `【${item.candidate}】【${item.btnValue}】${this.$t("workFlow.roams.approval")}，${this.$t("workFlow.roams.by")}【${
                item.activityName
                  ? item.activityName
                  : this.getNodeTitle(item)
              }】${this.$t("workFlow.roams.transferTo")}【${
                item.nextNodeInfo && item.nextNodeInfo.length > 0
                  ? item.nextNodeInfo[0].actName
                    ? item.nextNodeInfo[0].actName
                    : this.getNodeTitle(item.nextNodeInfo[0])
                  : ""
              }】`;
            } else {
              return `【${userName}】【${
                item.btnValue
              }】`+ this.$t('workFlow.roams.approval');
            }
          } else {
            let nextNodeName = '';
            if(item.nextNodeInfo && item.nextNodeInfo.length > 0){
                item.nextNodeInfo.forEach(ele => {
                  if(ele.activityName){
                    nextNodeName += `【${ele.activityName}】`;
                  }else if(ele.activityType){
                    nextNodeName += `【${this.getNodeTitle(ele)}】`;
                  }
                });
            }
            return `【${userName}】【${
              item.btnValue
            }】${this.$t("workFlow.roams.approval")}，${this.$t("workFlow.roams.by")}【${
              item.activityName
                ? item.activityName
                : this.getNodeTitle(item)
            }】${this.$t("workFlow.roams.transferTo")}${nextNodeName}`;
          }
        }
      }
    },
    getManualinfos(item){
      let manualinfosName = '';
      let length = item.manualinfos.length;
      item.manualinfos.forEach((ele,index) => {
        manualinfosName += `【${ele.departmentName?ele.departmentName:'部门'}-${ele.account?ele.account:'姓名'}】`;
        if(index!=(length-1)){
           manualinfosName += '、';
        }
      });
      return manualinfosName;
    }
  }
};
</script>
<style scoped>
div /deep/ .el-timeline-item__tail{
left: 8px;
}
</style>
<style lang="scss" scoped>
.roams-box {
  margin: 0 100px;
  display: flex;
  .card {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background-color: #fafafa;
	border: 1px solid #ebeef5;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 10px;
    margin: 0 20px;
    padding: 15px;
  }
  .icon {
    flex-basis: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .time {
    flex-basis: 40%;
    display: flex;
    align-items: center;
    color: #409EFF;
    margin: 0 20px;
    font-size: 14px;
    padding: 16px;
  }
  .flex-start {
    justify-content: flex-start;
  }
  .flex-end {
    justify-content: flex-end;
  }
  .left::before {
    content: "";
    position: absolute;
    /* top: 16px; */
    right: 100%;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid #f5f5f5;
  }
  .right::before {
    content: "";
    position: absolute;
    /* top: 16px; */
    left: 100%;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-left: 7px solid #f5f5f5;
  }
}
.mt-20 {
  margin-top: 20px;
}
.card .roams-text{
	line-height: 22px;
	color: #999;
}
.el-timeline-item__node{
	background-color:#fff;
	z-index: 9;
	border:4px solid #409EFF;
}
.card span{
	color: #4d4d4d;
}
.round-one{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #04bca4;
	display: inline-block;
	margin-right: 6px;
}
.round-two{
	background-color: #f4aa1d;
}
.round-three{
	background-color: #2e83f8;
}

</style>
